Web Development Components এর জন্য Conditional Rendering গাইড ও নোট

Riot.js-এ Conditional Rendering একটি শক্তিশালী বৈশিষ্ট্য যা আপনাকে UI এর বিভিন্ন অংশগুলি শর্তাধীনভাবে render করতে সক্ষম করে। এটি বিশেষত তখন কাজে আসে যখন আপনি চাইছেন নির্দিষ্ট ডেটা বা শর্ত পূর্ণ হলে একটি উপাদান (component) বা অংশ UI তে প্রদর্শিত হোক, এবং অন্যথায় না।

Riot.js-এ conditional rendering সাধারণত if বা each ডিরেক্টিভ ব্যবহার করে করা হয়। এটি মূলত DOM এর অংশগুলিকে শর্তাধীনভাবে render করার জন্য ব্যবহৃত হয়।

Conditional Rendering in Riot.js

1. if ডিরেক্টিভ: if ডিরেক্টিভ ব্যবহার করে, আপনি একটি UI অংশ শর্তসাপেক্ষে render করতে পারেন। এটি সাধারণত একটি ভেরিয়েবল বা এক্সপ্রেশনের ভিত্তিতে UI অংশ প্রদর্শন বা গোপন করার জন্য ব্যবহৃত হয়।
2. else ডিরেক্টিভ: else ব্যবহার করে আপনি একটি বিকল্প UI অংশ render করতে পারেন, যদি if শর্ত মেলেনা।
3. each ডিরেক্টিভ: each ডিরেক্টিভ ব্যবহার করে আপনি একটি অ্যারে বা লিস্টের উপাদানগুলির জন্য UI render করতে পারেন।

১. if ডিরেক্টিভের উদাহরণ:

ধরা যাক, আপনি একটি login কম্পোনেন্ট তৈরি করতে চান যেখানে শুধুমাত্র যদি ইউজার লগইন থাকে, তবে তার নাম প্রদর্শিত হবে, অন্যথায় "Login to continue" বার্তা প্রদর্শিত হবে।

<!-- ConditionalRendering.riot -->
<conditional-rendering>
  <h1>If condition example</h1>
  
  <!-- Conditional rendering using if -->
  <h2 if={isLoggedIn}>Welcome, {username}!</h2>
  <p if={!isLoggedIn}>Please login to continue.</p>
  
  <button onclick={toggleLogin}>Toggle Login Status</button>

  <script>
    export default {
      onMounted() {
        this.isLoggedIn = false; // Initially the user is not logged in
        this.username = 'John Doe'; // Sample username
      },

      toggleLogin() {
        this.isLoggedIn = !this.isLoggedIn; // Toggle login status
      }
    }
  </script>
</conditional-rendering>

ব্যাখ্যা:

• <h2 if={isLoggedIn}>: যদি isLoggedIn সত্য হয়, তাহলে এই ট্যাগটি UI তে প্রদর্শিত হবে।
• <p if={!isLoggedIn}>: যদি isLoggedIn মিথ্যা হয়, তাহলে এই ট্যাগটি প্রদর্শিত হবে।
• toggleLogin() ফাংশনটি ইউজারকে লগইন বা লগ আউট করার ক্ষমতা প্রদান করে, এবং isLoggedIn ভেরিয়েবলের মান পরিবর্তন করলে UI আপডেট হবে।

২. else ডিরেক্টিভের উদাহরণ:

আপনি if এবং else ডিরেক্টিভ ব্যবহার করে দুটি শর্তের মধ্যে স্যুইচ করতে পারেন। এখানে একটি উদাহরণ:

<!-- ElseConditionRendering.riot -->
<else-condition-rendering>
  <h1>Else condition example</h1>
  
  <h2 if={isLoggedIn}>Welcome, {username}!</h2>
  <p else>Please login to continue.</p>

  <button onclick={toggleLogin}>Toggle Login Status</button>

  <script>
    export default {
      onMounted() {
        this.isLoggedIn = false; // Initially the user is not logged in
        this.username = 'John Doe'; // Sample username
      },

      toggleLogin() {
        this.isLoggedIn = !this.isLoggedIn; // Toggle login status
      }
    }
  </script>
</else-condition-rendering>

ব্যাখ্যা:

• <h2 if={isLoggedIn}>: isLoggedIn যদি সত্য হয়, তাহলে এই ট্যাগটি প্রদর্শিত হবে।
• <p else>: if শর্ত মেলেনি (অর্থাৎ isLoggedIn মিথ্যা) হলে, এই অংশটি প্রদর্শিত হবে।

৩. each ডিরেক্টিভের উদাহরণ (লিস্ট রেন্ডারিং):

each ডিরেক্টিভের মাধ্যমে আপনি একটি অ্যারে বা লিস্টের প্রতিটি উপাদান ডাইনামিকভাবে রেন্ডার করতে পারেন।

<!-- EachConditionRendering.riot -->
<each-condition-rendering>
  <h1>Each condition example</h1>
  
  <ul>
    <li each={item in items}>{item}</li>
  </ul>
  
  <button onclick={addItem}>Add Item</button>

  <script>
    export default {
      onMounted() {
        this.items = ['Item 1', 'Item 2', 'Item 3']; // Initial items list
      },

      addItem() {
        this.items.push('New Item'); // Add a new item to the list
      }
    }
  </script>
</each-condition-rendering>

ব্যাখ্যা:

• <li each={item in items}>: এখানে items অ্যারের প্রতিটি উপাদানকে li ট্যাগে রেন্ডার করা হচ্ছে।
• addItem() ফাংশনটি items অ্যারে তে নতুন একটি আইটেম যোগ করে এবং UI তে তা দেখানো হয়।

Riot.js এ Conditional Rendering এর সুবিধা:

• প্রতিক্রিয়াশীল UI: শর্তসাপেক্ষে UI অংশগুলি রেন্ডার করতে ব্যবহার করা হয়, যার মাধ্যমে আপনি ডেটা পরিবর্তনের সাথে UI কে প্রতিক্রিয়া দিতে সক্ষম হন।
• সহজ এবং পরিষ্কার কোড: if, else, এবং each ডিরেক্টিভগুলি Riot.js কোডকে পরিষ্কার এবং সহজ করে তোলে, এবং কোডের রক্ষণাবেক্ষণ সহজ করে।
• ডায়নামিক UI পরিবর্তন: ডেটার পরিবর্তনের সাথে UI আপডেট হয়, যা ব্যবহারকারীর অভিজ্ঞতা উন্নত করে।

সারসংক্ষেপ:

Riot.js-এ Conditional Rendering ব্যবহার করে আপনি শর্ত অনুযায়ী UI-এর বিভিন্ন অংশ প্রদর্শন বা গোপন করতে পারেন। এটি if, else, এবং each ডিরেক্টিভ ব্যবহার করে করা হয়, যা ডেটার উপর ভিত্তি করে UI পরিবর্তন করতে সহায়তা করে। এই বৈশিষ্ট্যটি ডেভেলপারদের UI আরও ইন্টারঅ্যাকটিভ এবং ডায়নামিকভাবে তৈরি করতে সাহায্য করে।